<template>
  <view class="container">
    <view class="s-box">
      <view class="title"> 提现金额 </view>
      <view class="inp">
        <text>￥</text>
        <input
          v-model="money"
          type="number"
          placeholder="请输入提现金额"
          placeholder-class="pla-class"
        />
        <image @click="del()" :src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
      </view>
      <view class="text">
        <text>手续费：{{ withdrawInfo.servicefee }}%</text>
      </view>
      <view class="text">
        <text>实际到账金额：￥{{ realMoney || 0 }}</text>
      </view>
      <view class="text">
        <text>余额：{{ withdrawInfo.money }}</text>
        <text @click="all()">全部提现</text>
      </view>
    </view>
    <!-- <view class="uni-flex-1">
			
		</view> -->
    <view class="bank-card">
      <!-- <view class="title"> 提现到银行卡 </view> -->
      <view class="title"> 提现到支付宝 </view>
      <view class="list">
        <view
          class="item"
          :class="{ select: i == accountIndex }"
          v-for="(item, i) in payAccountInfoList"
          :key="i"
          @click="check(i)"
        >
          <image :src="$img_path('/pagesMine/72.png')" mode="widthFix"></image>
          <view class="text">
            <view class="name"> {{ item.bankName }} </view>
            <view class="num">
              {{ item.cardCode.slice(0, 4) + "****" + item.cardCode.slice(-4) }}
            </view>
          </view>
        </view>
        <view class="item add-card" @click="addBank()">
          <image :src="$img_path('/pagesMine/73.png')" mode="widthFix"></image>
          <!-- <text>添加银行卡</text> -->
          <text>添加支付宝</text>
        </view>
      </view>
    </view>

    <view class="b-btn">
      <view class="b-box" @click="apply()">
        <button>申请提现</button>
      </view>
    </view>
  </view>
</template>

<script>
import { initialWithdraw, getPayAccount, payWithdraw } from "@/utils/api/userApi.js";
export default {
  data() {
    return {
      money: "",
      // 提现信息
      withdrawInfo: {},
      // 支付宝账号
      payAccountInfoList: [],
      // 账号列表选择下标
      accountIndex: 0,
    };
  },
  onShow() {
    this.initialWithdraw();
    this.getPayAccount();
  },
  computed: {
    // 实际到账金额(去掉手续费)
    realMoney() {
      if (!this.money) {
        return "";
      } else {
        return (this.money * (1 - this.withdrawInfo.servicefee / 100)).toFixed(2);
      }
    },
  },
  watch: {
    money(val) {
      if (Number(val) > this.withdrawInfo.money) {
        uni.showToast({
          title: "提现金额不能大于用户余额",
          icon: "none",
        });
        this.money = this.withdrawInfo.money;
      }
    },
  },
  methods: {
    // 获取提现信息配置信息
    initialWithdraw() {
      initialWithdraw().then((res) => {
        console.log(res);
        this.withdrawInfo = res.data;
      });
    },
    // 获取支付宝账号
    getPayAccount() {
      getPayAccount().then((res) => {
        this.payAccountInfoList = res.data;
      });
    },
    // 删除
    del() {
      this.money = "";
    },
    // 全部提现
    all() {
      this.money = this.withdrawInfo.money;
    },
    // 选择账号
    check(i) {
      this.accountIndex = i;
    },
    // 申请提现
    apply() {
      console.log("apply", this.money);
      if (!this.money) {
        console.log("no money input");
        uni.showToast({
          title: "请输入提现金额",
          icon: "none",
        });
        return;
      }
      if (Number(this.money) > this.withdrawInfo.money) {
        console.log("money too much");
        uni.showToast({
          title: "提现金额不能大于用户余额",
          icon: "none",
        });
        return;
      }
      payWithdraw({
        account_id: this.payAccountInfoList[this.accountIndex].id,
        money: this.money,
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          uni.showToast({
            title: "申请成功",
          });
          this.initialWithdraw();
          this.money = "";
        }
      });
    },
    // 添加银行卡
    addBank() {
      uni.navigateTo({
        url: "/pagesRegion/bankCard/add",
      });
    },
  },
};
</script>
<style>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 38rpx 32rpx 0;
  box-sizing: border-box;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
  min-height: 100vh;
  .s-box {
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(123, 123, 123, 0.16);
    border-radius: 16rpx;
    padding: 28rpx 18rpx 52rpx 22rpx;
    box-sizing: border-box;
    .title {
      font-weight: bold;
      font-size: 36rpx;
      color: #000000;
      line-height: 50rpx;
    }
    .inp {
      display: flex;
      align-items: center;
      padding: 28rpx 0;
      margin-top: 22rpx;
      border-bottom: 2rpx solid #ececec;
      margin-bottom: 6rpx;
      & > text {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        line-height: 56rpx;
      }
      /deep/ .pla-class {
        font-weight: 400;
        font-size: 32rpx;
        color: #aaaaaa;
        line-height: 56rpx;
      }
      input {
        flex: auto;
        padding: 0 20rpx 0 30rpx;
        box-sizing: border-box;
      }
      image {
        width: 39rpx;
        height: 39rpx;
      }
    }
    .text {
      margin-top: 42rpx;
      text {
        font-weight: bold;
        font-size: 34rpx;
        color: #333333;
        line-height: 34rpx;
        &:nth-child(2) {
          margin-left: 96rpx;
          color: #e72a2a;
          font-size: 40rpx;
        }
      }
    }
  }
  .bank-card {
    margin-top: 36rpx;
    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      line-height: 44rpx;
    }
    .list {
      .item {
        width: 100%;
        // padding: 22rpx 26rpx 20rpx;
        height: 106rpx;
        padding: 0 26rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: #ffffff;
        border: 2rpx solid #b4b4b4;
        border-radius: 16rpx;
        margin-top: 34rpx;
        &.select {
          background-color: #fff9f8;
          border: 2rpx solid #e72a2a;
        }
        image {
          width: 98rpx;
          height: 67.5rpx;
        }
        .text {
          padding-left: 16rpx;
          .name {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
          }
          .num {
            font-weight: 400;
            font-size: 24rpx;
            color: #707070;
            line-height: 34rpx;
            margin-top: 8rpx;
          }
        }

        &.add-card {
          image {
            width: 40rpx;
            height: 40rpx;
          }
          text {
            font-weight: bold;
            font-size: 28rpx;
            color: #b4b4b4;
            line-height: 40rpx;
            margin-left: 16rpx;
          }
        }
      }
    }
  }

  .b-btn {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 22rpx;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .b-box {
      width: 100%;
      padding: 20rpx 0;
      button {
        width: 100%;
        height: 96rpx;
        background: linear-gradient(135deg, #ffa233 0%, #fb4c4c 100%);
        border-radius: 80rpx;
        font-weight: bold;
        font-size: 36rpx;
        color: #ffffff;
        line-height: 96rpx;
      }
    }
  }
}

.uni-flex-1 {
  flex: 1;
}
</style>
